import React, { useMemo } from 'react'

interface propsInterface {
  name: string
  size?: string
  color?: string
  prefix?: string
  onClick?: () => void
}

export default function SvgIcon(props: propsInterface) {
  const size = props.size || '36px'
  const color = props.color || 'currentColor  '
  const prefix = props.prefix || 'icon'

  const iconName = useMemo<string>(() => {
    return `#${prefix}-${props.name}`
  }, [prefix, props.name])

  return (
    <svg
      onClick={e => {
        props.onClick && props.onClick()
      }}
      style={{
        height: size,
        width: size,
        color: color,
        fill: color,
      }}
      aria-hidden="true"
    >
      <use xlinkHref={iconName} />
    </svg>
  )
}
